<template>
  <div class="com-container" @dblclick="chinaMap">
    <div class="com-chart" ref="map_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getProvinceMapInfo } from '../utils/map_utils'
import axios from 'axios'
export default {
  data() {
    return {
      axiosInstance:null,
      chinaMapData: '',
      chartInstance: null,
      cityMapData: [],
    }
  },
  computed: {
    ...mapState(['theme']),
  },
  watch: {
    // 当主题发生变化时
    theme() {
      this.chartInstance.dispose()
      this.initChart()
      this.screenAdapter()
      this.updateChart()
    },
  },
  created() {
    this.$socket.registerCallBack('mapData', this.getData)

    this.axiosInstance = axios.create({
      baseURL: 'http://124.221.156.158:3031',
    })
   
  },
  destroyed() {
    this.$socket.unRegisterCallBack('mapData')
  },
  mounted() {
    this.initChart()
    this.$socket.send({
      action: 'getData',
      socketType: 'mapData',
      chartName: 'map',
      value: '',
    })
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
    // this.getData()
  },
  methods: {
    async initChart() {
      this.chartInstance = this.$chart.init(this.$refs.map_ref, this.theme)
      if (!this.chinaMapData) {
        const {data:res} = await this.axiosInstance.get('/map/china.json')
        this.chinaMapData = res
      }
      //   绘制基础地图
      this.$chart.registerMap('china', this.chinaMapData)
      const initOption = {
        title: {
          text: '▎商家分布',
          left: 20,
          top: 20,
        },
        geo: {
          type: 'map',
          map: 'china',
          top: '5%',
          bottom: '5%',
          //允许拖动及缩放
          roam: true,
          // zoom: 1.1, //默认缩放比例
          itemStyle: {
            // 地图的填充色
            areaColor: '#2E72BF',
            // 省份的边框色
            borderColor: '#333',
          },
          label: {
            show: true,
            color: 'white',
            formatter: `{a}`,
          },
        },
      }
      //  初始化地图
      this.chartInstance.setOption(initOption)
      // 点击省份的数据 进入省份
      this.chartInstance.on('click', async e => {
        console.log('地图被点击了', e)
        // 通过工具函数拿到点击的地图对应的中文拼音(key),和拼接出需要的文件路径(path)
        const ProvinceInfo = getProvinceMapInfo(e.name)
        if (!ProvinceInfo.key) {
          return
        }
        if (!this.cityMapData[ProvinceInfo.key]) {
          const { data: res } = await this.axiosInstance.get(ProvinceInfo.path)
          this.cityMapData[ProvinceInfo.key] = res
          this.$chart.registerMap(ProvinceInfo.key, res)
        }
        // // 设置最新的配置项
        const changeOption = {
          geo: {
            map: ProvinceInfo.key,
          },
        }
        this.chartInstance.setOption(changeOption)
      })
    },
    async getData(ret) {
      // const res = await this.$axios.get('/map.json')
      // console.log(res)
      // this.allData = res.data
      this.allData = JSON.parse(ret)
      this.updateChart()
    },
    // 散点图
    updateChart() {
      // 图例的数据
      const legendArr = this.allData.map(item => {
        return item.name
      })
      // 散点图的数据
      const seriesArr = this.allData.map(item => {
        // return 一个类别下的所有散点数据
        return {
          type: 'effectScatter',
          // 图例的name需要与series的name相同
          name: item.name,
          data: item.children,
          // 让散点图使用地图坐标系统
          coordinateSystem: 'geo',
          // 涟漪动画效果配置
          rippleEffect: {
            // 涟漪效果直径
            scale: 20,
            // 空心的涟漪动画效果
            brushType: 'stroke',
          },
        }
      })

      // 数据配置项
      const dataOption = {
        legend: {
          left: '2%',
          bottom: '5%',
          // 图例的方向
          orient: 'verticle',
          data: legendArr,
        },
        series: seriesArr,
      }
      this.chartInstance.setOption(dataOption)
      this.getResize()
    },
    getResize() {
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    chinaMap() {
      const chinaMapOption = {
        geo: {
          map: 'china',
        },
      }
      this.chartInstance.setOption(chinaMapOption)
    },
    screenAdapter() {
      const titleFontSize = (this.$refs.map_ref.offsetWidth / 100) * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize / 1.5,
          },
        },
      }
      this.chartInstance.setOption(adapterOption)
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize()
    },
  },
}
</script>

<style></style>
